<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}-监管科</div>
      <div class="extra fr">
        <el-alert
          show-icon
          v-show="isEdit"
          :title="msg"
          type="success"
          :closable="false"
          style="padding: 2px 16px; font-size: 14px;">
        </el-alert>
      </div>
    </div>

    <div class="app-container margin-content padding-content">
      <div class="header clearfix">
        <div class="title fl">月度送审统计</div>
        <div class="fr">
          <el-form
            :model="dataForm"
            ref="dataForm"
            inline>
            <el-form-item prop="month" label="送审月份" style="margin-bottom: 0;">
              <el-date-picker
                type="month"
                value-format="yyyy-MM"
                v-model="dataForm.month"
                @change="handleMonthChange"
                :editable="false"
                :clearable="false"
                :picker-options="pickerOptions"
                placeholder="选择月份"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <el-table
        :key="tableKey"
        :data="tableData"
        v-loading="loading"
        element-loading-text="正在加载..."
        :highlight-current-row="true"
        :max-height="scrollHeight"
        style="width: 100%;">

        <el-table-column label="配合提供查验服务的企业名称" width="250" property="chkCompanyName" fixed="left"/>
        <el-table-column label="口岸查验监管场所名称" width="90" property="portName"/>

        <el-table-column label="吊装费（包括吊运、托运费用）" header-align="center">
          <el-table-column label="20尺集装箱数" width="100" property="twentyLfNum"/>
          <el-table-column label="费用金额（元）" width="110" property="twentyLfAmount"/>
          <el-table-column label="40尺集装箱数" width="100" property="fortyLfNum"/>
          <el-table-column label="费用金额（元）" width="110" property="fortyLfAmount"/>
        </el-table-column>
        <el-table-column label="移位费（包括短距离运输、拆箱、装箱费用）" header-align="center">
          <el-table-column label="20尺集装箱数" width="100" property="twentyMvNum"/>
          <el-table-column label="费用金额（元）" width="110" property="twentyMvAmount"/>
          <el-table-column label="40尺集装箱数" width="100" property="fortyMvNum"/>
          <el-table-column label="费用金额（元）" width="110" property="fortyMvAmount"/>
          <el-table-column label="箱式货柜车数" width="100" property="boxMvNum"/>
          <el-table-column label="费用金额（元）" width="110" property="boxMvAmount"/>
        </el-table-column>
        <el-table-column label="仓储费" header-align="center">
          <el-table-column label="20尺集装箱数" width="100" property="twentyStoreNum"/>
          <el-table-column label="费用金额（元）" width="110" property="twentyStoreAmount"/>
          <el-table-column label="40尺集装箱" width="100" property="fortyStoreNum"/>
          <el-table-column label="费用金额（元）" width="110" property="fortyStoreAmount"/>
        </el-table-column>


        <el-table-column label="申报进出口集装箱数量（自然箱）" width="120" property="declareContNum"/>
        <el-table-column label="实施查验集装箱数量（自然箱）" width="120" property="chkContNum"/>
        <el-table-column label="申报进出口的箱式货柜车数量（辆）" width="120" property="declareBoxNum"/>
        <el-table-column label="实施查验的箱式货柜车数量（辆）" width="120" property="chkBoxNum"/>
        <el-table-column label="费用合计(元）" width="80" property="totalAmount"/>
        <el-table-column label="免除费用的进出口企业数量" width="100" property="freeEntNum"/>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <a v-if="scope.row.totalAmount !== '0.00'"
               @click="handleSubmit({portId:scope.row.portId, month: dataForm.month})">送审</a>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--监管科：-->
    <!--身份：0-->
    <!--监管科送审通过：0-->
    <!--监管科送审不通过：11-->
    <!--不可操作状态：-->
    <!--可操作状态：-->
    <cost-template
      ref="costTemplate"
      :identity="0"
      :next="0"
      :operation="[5]"
      re-send>

      <div slot="header" class="header" style="margin-top: -14px;">
        <div class="title">送审历史</div>
      </div>
    </cost-template>

    <!--审核-->
    <audit v-if="sendVisible" type="send" ref="send" @refresh="_refresh"></audit>
  </div>
</template>

<script>
  // api
  import { statisticsByMonth, getStatisticsList } from '@/api/statistics'
  // utils
  import { getPreMonth } from '@/utils'
  // vuex
  import { mapMutations } from 'vuex'
  // components
  import Audit from '@/components/Audit'
  import CostTemplate from '@/components/CostTemplate'

  export default {
    name: 'costCollision',
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        dataForm: {
          month: getPreMonth(),
        },
        sendVisible: false,
        pickerOptions: {
          disabledDate(time) {
            const d = new Date()
            const pre = d.setMonth(d.getMonth() - 1)
            return time.getTime() > pre
          }
        },
        isEdit: false,
        reviewStatus: null,
        scrollHeight: 0
      }
    },
    computed: {
      msg() {
        let _msg = ''
        switch (parseInt(this.reviewStatus)) {
          case 1:
            _msg = '该月统计数据已送审，请查看送审历史。'
            break
          case 2:
            _msg = '该月有未确认的查验操作，请先确认查验操作。'
            break
        }
        return _msg
      }
    },
    created() {
      this.getStatisticsList()
      this.tableResize()
    },
    methods: {
      tableResize(h = 285) {
        this.scrollHeight = document.body.scrollHeight - h
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - h
        }
      },
      _statisticsByMonth() {
        this.loading = true
        statisticsByMonth(this.dataForm).then((res) => {
          if (res.data.data instanceof Array) {
            this.isEdit = false
            this.tableData = res.data.data
            this.loading = false
          } else {
            this.isEdit = true
            this.reviewStatus = res.data.data.reviewStatus
            this.tableData = []
            this.loading = false
          }
        })
      },
      _refresh() {
        this._statisticsByMonth()
        this.$refs['costTemplate'].handleMonthChange()
      },
      handleMonthChange() {
        this._statisticsByMonth()
      },
      handleSubmit({portId, month}) {
        this.sendVisible = true
        this.$nextTick(() => {
          this.setCurrentId({portId, month})
          this.$refs['send'].init()
        })
      },
      ...mapMutations({
        setCurrentId: 'SET_CURRENTID'
      })
    },
    components: {
      Audit,
      CostTemplate
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped="scoped">
  .app-container.padding-content {
    padding-top: 0 !important;
  }
</style>
